<template>
    <div>
        <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>商品管理</el-breadcrumb-item>
            <el-breadcrumb-item>商品分类</el-breadcrumb-item>
        </el-breadcrumb>

        <el-card>
            <el-row>
                <el-col>
                    <el-button type="primary" @click="showAddCateDialog">添加分类</el-button>
                </el-col>
            </el-row>

            <tree-table 
                class="treetable"
                :data="cateList"
                :columns="columns"
                :selection-type="false"
                :expand-type="false"
                :show-index="true"
                index-text="#"
                border
                stripe
                :show-row-hover="false"
                >
            <template slot="isok" slot-scope="scope">
                <i v-if="scope.row.cat_deleted === false" 
                    class="el-icon-success"
                    style="color:lightgreen;"></i>
                <i v-else class="el-icon-error" style="color:red;"></i>
            </template>
            <template slot="order" slot-scope="scope">
                <el-tag v-if="scope.row.cat_level === 0" size="mini">一级</el-tag>
                <el-tag v-else-if="scope.row.cat_level === 1" size="mini" type="success">二级</el-tag>
                <el-tag v-else size="mini" type="warning">三级</el-tag>
            </template>
            <template slot="opt" slot-scope="scope">
                <el-button type="primary" icon="el-icon-edit" size="mini" 
                    @click="showEditDialog(scope.row)">编辑</el-button>
                <el-button type="danger" icon="el-icon-delete" size="mini" 
                    @click="deleteCate(scope.row.cat_id)">删除</el-button>
            </template>
            </tree-table>
            <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="queryInfo.pagenum"
            :page-sizes="[5, 10, 30, 50]"
            :page-size="queryInfo.pagesize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
            </el-pagination>
        </el-card>

        <el-dialog title="添加分类" :visible.sync="dialogCateFormVisible" width="30%" @close="addDialogClosed()">
            <el-form :model="addForm" :rules="addFormRoles" ref="addFormRef">
                <el-form-item label="分类名称" prop="cat_name">
                <el-input v-model="addForm.cat_name"></el-input>
                </el-form-item>
                <el-form-item label="父级分类">
                    <el-cascader
                    v-model="selectedKeys"
                    :options="parentCateList"
                    :props="cascaderProps"
                    @change="parentCateChanged"
                    size="small"
                    :clearable="true"
                    :collapse-tags="true"
                    change-on-select></el-cascader>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogCateFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="addCate()">确 定</el-button>
            </div>
        </el-dialog>

        <el-dialog title="编辑分类" :visible.sync="dialogEditCateFormVisible" width="30%" @close="editDialogClosed()">
            <el-form :model="editForm" :rules="addFormRoles" ref="editFormRef">
                <el-form-item label="分类名称" prop="cat_name">
                <el-input v-model="editForm.cat_name"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogEditCateFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="editCate()">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
export default {
    data(){
        return{
            queryInfo:{
                type: 3,
                pagenum: 1,
                pagesize: 5
            },
            cateList:[],
            total: 0,
            dialogCateFormVisible: false,
            dialogEditCateFormVisible: false,
            columns: [
            {
                label: '分类名称',
                prop: 'cat_name'
            },
            {
                label: '是否有效',
                type:'template',
                //自定义模版
                template:'isok'
            },
            {
                label: '排序',
                type:'template',
                template:'order'
            },
            {
                label: '操作',
                type:'template',
                template:'opt'
            }
            ],
            addForm:{
                cat_name:'',
                cat_pid:0,
                cat_level:0
            },
            editForm: {
                cat_id: '',
                cat_name: '',
                cat_pid: 0,
                cat_level: 0
            },
            addFormRoles: {
                cat_name: [
                    { required: true, message: '请输入分类名称', trigger: 'blur' },
                ]
            },
            parentCateList:[],
            cascaderProps:{
                value:'cat_id',
                label:'cat_name',
                children:'children',
                expandTrigger:'hover'
            },
            selectedKeys:[]
        }
    },
    created(){
        this.getCateList()
    },
    methods:{
        async getCateList(){
            const {data: res} = await this.$http.get('categories',{params: this.queryInfo})

            if(res.meta.status !== 200) return this.$message.error(res.meta.msg)

            this.cateList = res.data.result
            this.total =res.data.total
        },
        handleSizeChange(newSize){
            this.queryInfo.pagesize=newSize
            this.getCateList()
        },
        handleCurrentChange(newPage){
            this.queryInfo.pagenum=newPage
            this.getCateList()
        },
        showAddCateDialog(){
            this.getParentCateList()
            this.dialogCateFormVisible = true
        },
        addDialogClosed(){
            this.$refs.addFormRef.resetFields()
            this.addForm.cat_pid= 0
            this.addForm.cat_level= 0
            this.selectedKeys=[]

            this.dialogCateFormVisible = false
        },
        editDialogClosed(){
            this.$refs.editFormRef.resetFields()

            this.dialogEditCateFormVisible = false
        },
        async getParentCateList(){
            const {data: res} = await this.$http.get('categories',{params: {type:2}})

            if(res.meta.status !== 200) return this.$message.error(res.meta.msg)

            this.parentCateList = res.data
        },
        parentCateChanged(){
            if(this.selectedKeys.length>0){
                this.addForm.cat_pid=this.selectedKeys[this.selectedKeys.length-1]
                this.addForm.cat_level=this.selectedKeys.length
            }else{
                this.addForm.cat_pid= 0
                this.addForm.cat_level= 0
            }
        },
        async addCate(){
            this.$refs.addFormRef.validate(async valid=>{
                if (!valid) return

                const { data: res } = await this.$http.post('categories', this.addForm)

                if (res.meta.status !== 201) return this.$message.error('添加分类失败!')

                this.addDialogClosed()

                this.getCateList()
                this.$message.success('添加分类成功!')
            })
        },
        showEditDialog(cateInfo){
            this.editForm = cateInfo

            this.dialogEditCateFormVisible=true
        },
        async editCate(){
            this.$refs.editFormRef.validate(async valid=>{
                if (!valid) return

                const { data: res } = await this.$http.put(`categories/${this.editForm.cat_id}`, {cat_name:this.editForm.cat_name})

                if (res.meta.status !== 200) return this.$message.error('修改分类失败!')

                this.dialogEditCateFormVisible= false

                this.getCateList()
                
                this.$message.success('修改分类成功!')
            })
        },
        async deleteCate(id){
            
            this.$confirm("确认删除吗?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
            .then(async () => {
                const { data: res } = await this.$http.delete(`categories/${id}`)

                if (res.meta.status !== 200) return this.$message.error('删除分类失败!')

                this.getCateList()
                
                this.$message.success('删除分类成功!')
            })
            .catch(() => {});
        }
    }
}
</script>

<style lang="less" scoped>

</style>